<template>
    <basic-layout title="上传体检报告" :showAddBtn="false" class="wrapBox">
        <van-form ref="form" label-width="4.1em">
            <div class="imgBox">
                <span>体检报告</span>
                <van-field name="uploader">
                    <template #input>    
                        <uploadCom ref="uploadRef" :maxNumber="1" @uploadFiles="uploadFileIds"
                        accept=".pdf" :defaultFiles="defaultFiles"></uploadCom>
                    </template>
                </van-field>
            </div>
        </van-form>
        
        <div class="btnBox">
            <van-button round type="info" block @click="onSubmit">提交</van-button>
        </div>
    </basic-layout>
</template>

<script>
    import { ApiAdd } from '@api/realAssets/rvhealth/report';
    
    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                accept: ".jpg, .jpeg, .png, .pdf, .doc, .docx",
                maxSize: 51200, // 文件最大：50M
                defaultFiles:[],
                formData: {
                    url: "",
                    fileCode: '',// 文件
                    uploadType: "手机",
                },
                // 必填项校验
                form: {
                    url: [{ required: true, message: "请上传体检报告", trigger: "blur" }],
                },
            };
        },
        created () {
           if(sessionStorage.getItem("userInfo")) this.formData.userId = JSON.parse(sessionStorage.getItem("userInfo")).userId;
        },
        computed: {

        },
        mounted () {
        },
        watch: {

        },
        methods: {
            // 附件上传
            uploadFileIds (arr) {
                this.formData.fileCode = arr.length ? arr[0].fileCode : '';
                this.formData.url = arr.length ? arr[0].url : '';
            },
            // 提交
            onSubmit() {
                // 全局表单验证
                if(this.formData && !this.formData.url) return this.$Notify({ type: "warning", message: "请上传体检报告！" });
                this.$refs.form.validate().then( async () => {
                    let obj = { ...this.formData }
                    let res = await ApiAdd(obj);
                    console.log(res);
                    if (res.code === 1000) {
                        this.$Notify({ type: "success", message: "体检报告上传成功！" });
                        this.onCancel();
                    }
                }).catch(() => {
                    // this.$toast.fail('请完成必填项！')
                })
            },
            onCancel() {
                this.$refs.form.resetFields();
            },
        }
    };
</script>

<style scoped lang="less">
.wrapBox ::v-deep .content{
    position: relative;
    padding: 12px;
    background-color: #F4F7FA;
    .van-form {
        margin: 10px 0 20px;
        &>div {
            margin: 10px 0;
            border-radius: 10px;
        }
        .imgBox {
            background-color: #fff;
            &>span {
                display: inline-block;
                margin: 10px 0 0 16px;
            }
        }
    }
    // .btnBox{
    //     width: calc(100% - 24px);
    //     position: absolute;
    //     bottom: 20px;
    // }
}
</style>